{% extends 'layout.html' %}

        <!--css继承区域-->
{% block css %}
    .table {
    margin-bottom: 0;
    }

        <!--    字体图标改变大小-->
        <!--    .bi {-->
        <!--        font-size:66px;-->
        <!--    }-->

{% endblock %}


<!--主体内容继承区域-->
{% block content %}
        <a class="btn btn-primary" style="margin-top: 30px; margin-bottom: 10px; font-weight: 700;" href="/depart_add/"><i class="bi bi-plus-circle"></i> 新建部门</a>
<!--        <a class="btn btn-primary" style="margin-top: 30px; margin-bottom: 10px; font-weight: 700; float: right;" href="/depart_add/"><i class="bi bi-plus-circle"></i> 新建部门2</a>-->
        <div style="float: right; width: 300px; margin-top: 30px; margin-bottom: 10px;">
                <form method="get">
                    <div class="input-group">
                        <input type="text" class="form-control" placeholder="输入部门关键字" aria-label="Recipient's username" aria-describedby="button-addon2" name="q" value="{{ search_data }}">
<!--                          <button class="btn btn-outline-secondary" type="button" id="button-addon2">Button</button>-->
                        <button class="btn btn-outline-secondary" type="submit" id="button-addon2">
                            <i class="bi bi-search"></i>
                        </button>
                    </div>
                </form>
        </div>
        <div class="card">
            <h5 class="card-header" style="font-weight: 700;"><i class="bi bi-grid-3x3-gap-fill"></i> 部门列表</h5>
            <table class="table table-bordered align-middle table-hover text-center">
                <thead>
                <tr>
                    <th>ID</th>
                    <th>名称</th>
                    <th>操作</th>
                </tr>
                </thead>
                <tbody>
                {% for obj in queryset %}
                <tr>
                    <th>{{ obj.id }}</th>
                    <td>{{ obj.title }}</td>
                    <td>
                        <a class="btn btn-primary btn-xs" href="/depart/{{ obj.id }}/edit/">编辑</a>
                        <a class="btn btn-danger btn-xs" href="/depart/{{ obj.id }}/delete/">删除</a>
                    </td>
                </tr>
                {% endfor %}

                </tbody>
            </table>
             <div style="margin-top: 86px; display: flex; justify-content: center;">
                <ul class="pagination" >
                    {{ page_string }}
                </ul>
<!--             <nav aria-label="Page navigation example">-->
<!--              <ul class="pagination">-->
<!--                <li class="page-item">-->
<!--                  <a class="page-link" href="#" aria-label="Previous">-->
<!--                    <span aria-hidden="true">&laquo;</span>-->
<!--                  </a>-->
<!--                </li>-->
<!--                <li class="page-item"><a class="page-link" href="#">1</a></li>-->
<!--                <li class="page-item"><a class="page-link" href="#">2</a></li>-->
<!--                <li class="page-item"><a class="page-link" href="#">3</a></li>-->
<!--                <li class="page-item">-->
<!--                  <a class="page-link" href="#" aria-label="Next">-->
<!--                    <span aria-hidden="true">&raquo;</span>-->
<!--                  </a>-->
<!--                </li>-->
<!--              </ul>-->
<!--            </nav>-->
            </div>
        </div>
{% endblock %}